<template>
  <div
    class="tool-panel d-flex-c"
    :style="{ width: containerWidth + 'px'}"
  >
    <div class="tool-title flex-between">
      <span class="f-w f-16">{{ titleMap[currentKey] }}</span>
      <i
        class="el-icon-close c-pointer"
        @click="$emit('close')"
      />
    </div>
    <div class="flex-1 overflow-auto bg-white">
      <LayerPanel
        v-if="showMap.layer"
        v-show="currentKey === 'layer'"
        v-on="$listeners"
      />
      <BoundaryPanel
        v-if="showMap.boundary"
        v-show="currentKey === 'boundary'"
        v-on="$listeners"
      />
      <ItemPanel
        v-if="showMap.item"
        v-show="currentKey === 'item'"
        v-on="$listeners"
      />
      <ExportPanel
        v-if="showMap.export"
        v-show="currentKey === 'export'"
        v-on="$listeners"
      />
      <FinishPanel
        v-if="showMap.finish"
        v-show="currentKey === 'finish'"
        v-on="$listeners"
        ref="finishPanel"
        @showPanel="showPanel"
      />
      <InfoPanel
        v-if="showMap.info"
        v-show="currentKey === 'info'"
        v-on="$listeners"
        ref="InfoPanel"
      />
    </div>
  </div>
</template>

<script>
import LayerPanel from './panel/layer-panel.vue'
import BoundaryPanel from './panel/boundary-panel.vue'
import ItemPanel from './panel/item-panel.vue'
import ExportPanel from './panel/export-panel.vue'
import FinishPanel from './panel/finish-panel.vue'
import InfoPanel from './panel/info-panel.vue'
import { mapState } from 'vuex'
export default {
  name: 'ToolPanel',
  props: {
    currentKey: {
      type: String,
      default: ''
    }
  },
  components: {
    LayerPanel,
    BoundaryPanel,
    ItemPanel,
    ExportPanel,
    FinishPanel,
    InfoPanel
  },
  data () {
    return {
      titleMap: {
        layer: '基础图层控制',
        boundary: '专题区域边界编辑',
        item: '选定区域范围内图层要素设置',
        export: '专题图预览/设置',
        finish: '已出专题图录',
        info: '水利工程基础信息维护'
      },
      showMap: {
        layer: true,
        boundary: false,
        item: false,
        export: false,
        finish: false,
        info: false
      }
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
    containerWidth () {
      if (['item', 'finish', 'info'].includes(this.currentKey)) {
        return 757
      } else {
        return 300
      }
    }
  },
  watch: {
    async currentKey (v) {
      if (!this.showMap[v]) {
        this.showMap[v] = true
        this.$nextTick(() => {
          if (v === 'finish') {
            this.$refs.finishPanel.$refs.grid.refreshList({ CJBM: this.userInfo.dept.LEADER })
          }
        })
      }
    }
  },
  methods: {
    showPanel () {
      this.showMap.boundary = true
      this.showMap.item = true
      this.showMap.export = true
      this.$nextTick(() => {
        this.$root.$emit('updateMapMaking')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-panel {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  z-index: 9;
  height: 100%;
  box-shadow: 4px 0 8px 0 rgb(170 194 219 / 46%);
}

.tool-title {
  height: 46px;
  padding: 0 12px;
  border-bottom: 1px solid #f3f6f9;
  background: #fff;
  box-shadow: 0.98px 0.17px 8px 1px rgba(170, 194, 219, 0.32);

  > span {
    color: #333;
  }
}
</style>
